import { addAnswer, getQuestionNameList, } from "@/services";
import {  IPracticalProjectList } from "@/utils/questions";
import React, { useState, useEffect } from "react";
import styles from "@/pages/teachers/questionDetail.less"
import { Input, Button, Select, Form, Space } from 'antd';
import Editor from 'for-editor';
import useStore from "@/context/useStore";
import { SelectValue } from "antd/lib/select";
import { observer } from 'mobx-react-lite';
const { Option } = Select;

//我要提问
const addGenre = [{ name: "实训", type: "0" },
{ name: "面试", type: "1" },
{ name: "工作", type: "2" },
{ name: "其他", type: "3" },]

const questionForm: React.FC = (props) => {
    let { question } = useStore()

    //弹框内容数据
    let [typeChange1, handleChange1] = useState<any>("")
    let [typeChange2, handleChange2] = useState<any>("")
    const onFinish = (values: any) => {
        //我要提问 >  发布
        const { labels, questionContent, questionTitle, text1, text2, type } = values
        let params = { labels: [labels], questionContent: questionContent, questionTitle: questionTitle, text1: text1, text2: text2, type: type }
        addAnswer(params).then(res => {
            alert(res.msg)
            // question.getQuestionList(queryParams)
        })
    };



     //我要提问 实训项目下拉菜单
     let [practicalProjectList, setPracticalProjectList] = useState<IPracticalProjectList[]>([])

     useEffect(() => {
         getQuestionNameList().then(res => {
             console.log(res)
             setPracticalProjectList(res.data)
         })
     }, [])
     function handleChange(value: SelectValue) {
        // console.log(`selected ${value}`);
        handleChange2(value)
    }
    return (
        <>                    
        <Form
            name="basic"
            initialValues={{ remember: true }}
            onFinish={onFinish}>

            <Form.Item className={styles.wentiName}>
                <div>标题</div>
                <Space className={styles.wentiName_space}>
                    <Form.Item
                        name="questionTitle"
                        noStyle
                        rules={[{ required: true, message: 'Please input your questionTitle!' }]}
                        className={styles.wentiName_space_item}
                    >
                        <Input style={{ width: 160 }} placeholder="请输入问题名称" />
                    </Form.Item>
                </Space>
            </Form.Item>
            <Form.Item >
                <Input.Group compact>
                    <Form.Item style={{ marginRight: 20 }}
                        name="type"
                        noStyle
                        rules={[{ required: true, message: 'Province is required' }]}
                    >
                        <Select placeholder="请选择问题类型" style={{ width: 120 }} onChange={(e) => { handleChange1(e) }} >
                            {
                                addGenre.map((item) => {
                                    return <Option value={item.type} key={item.type}>{item.name}</Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    {
                        typeChange1 === "0" ? <div>
                            <Form.Item
                                name="text1"
                                noStyle
                                rules={[{ required: true, message: 'Street is required' }]}
                            >
                                <Select placeholder="请选择项目" style={{ width: 120 }} onChange={(e) => {
                                    handleChange(e)
                                    console.log(e)
                                }}>
                                    {
                                        typeChange1 === "0" ? practicalProjectList.map((item) => {
                                            return <Option value={item.value} key={item.value}>{item.name}</Option>
                                        }) : null
                                    }
                                </Select>
                            </Form.Item>
                            <Form.Item
                                name="text2"
                                noStyle
                                rules={[{ required: true, message: 'Street is required' }]}
                            >
                                <Select placeholder="请选择任务" style={{ width: 120 }} >
                                    {/* {
                                practicalProjectList.map((item) => {
                                    return <Option value={item.value} key={item.value}>{item.name}</Option>
                                })
                            } */}
                                </Select>
                            </Form.Item>
                        </div> : <div>
                            {
                                typeChange1 === "1" ? <div>
                                    <Form.Item style={{ marginBottom: 0 }}>
                                        <Form.Item
                                            name="text1"
                                            rules={[{ required: true }]}
                                            style={{ display: 'inline-block', width: 120 }}
                                        >
                                            <Input placeholder="公司" />
                                        </Form.Item>
                                        <Form.Item
                                            name="text2"
                                            rules={[{ required: true }]}
                                            style={{ display: 'inline-block', width: 120 }}
                                        >
                                            <Input placeholder="岗位" />
                                        </Form.Item>
                                    </Form.Item>
                                </div> : <div>
                                    {
                                        typeChange1 === "2" ? <div>
                                            <Form.Item style={{ marginBottom: 0 }}>
                                                <Form.Item
                                                    name="text1"
                                                    rules={[{ required: true }]}
                                                    style={{ display: 'inline-block', width: 120 }}
                                                >
                                                    <Input placeholder="工作" />
                                                </Form.Item>
                                            </Form.Item>
                                        </div> : <div>
                                            {
                                                typeChange1 === "3" ? <div>
                                                    <Form.Item style={{ marginBottom: 0 }}>
                                                        <Form.Item
                                                            name="text1"
                                                            rules={[{ required: true }]}
                                                            style={{ display: 'inline-block', width: 120 }}
                                                        >
                                                            <Input placeholder="其他" />
                                                        </Form.Item>
                                                    </Form.Item></div> : <div>
                                                    <Form.Item
                                                        name="text1"
                                                        noStyle
                                                        rules={[{ required: true, message: '请选择项目' }]}
                                                    >
                                                        <Select placeholder="请选择项目" style={{ width: 120 }} onChange={(e) => { handleChange(e) }}>
                                                        </Select>
                                                    </Form.Item>
                                                    <Form.Item
                                                        name="text2"
                                                        noStyle
                                                        rules={[{ required: true, message: '请选择任务' }]}>
                                                        <Select placeholder="请选择任务" style={{ width: 120 }} >

                                                        </Select>
                                                    </Form.Item>
                                                </div>
                                            }
                                        </div>
                                    }
                                </div>
                            }
                        </div>
                    }
                </Input.Group>
            </Form.Item>
            <div className={styles.questionContentBox}>
                <div>描述</div>
                <Form.Item style={{ marginBottom: 0 }}>
                    <Form.Item
                        name="questionContent"
                    >
                        <Editor placeholder="开始编辑..."
                            style={{ height: 300 }}
                            onChange={(value) => {
                                console.log(value);
                            }} />
                    </Form.Item>
                </Form.Item>
            </div>
            <div className={styles.tag}>
                <div>标签</div>
                <Form.Item
                    name="labels"
                    noStyle
                    rules={[{ required: true, message: 'Please input your tag!' }]}
                >
                    <Input style={{ width: 600 }} placeholder="标签" />
                </Form.Item>
            </div>
            <div className={styles.fb}>

                <Form.Item label=" " colon={false}>
                    <Button type="primary" htmlType="submit">发布</Button>
                </Form.Item>
            </div>
        </Form>
    
    </>
    )
}
export default observer(questionForm)

